<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>随机抽奖系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: #2c3e50;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }

        #lottery-container {
            background: #fff;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            text-align: center;
            margin: 20px;
        }

        #result {
            font-size: 3em;
            color: #e74c3c;
            margin: 20px;
            min-height: 80px;
            padding: 20px;
            border: 3px dashed #3498db;
            border-radius: 10px;
            transition: all 0.3s;
        }

        #start-btn {
            padding: 15px 40px;
            font-size: 1.5em;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: transform 0.2s, background 0.3s;
        }

        #start-btn:hover {
            background: #2980b9;
            transform: scale(1.05);
        }

        #start-btn:disabled {
            background: #95a5a6;
            cursor: not-allowed;
        }

		#winners {
			color: #fff;
			font-size: 1.2em;
			margin-top: 20px;
			max-width: 1200px;  /* 扩大最大宽度 */
			width: 90%;          /* 新增 */
			text-align: center;   /* 新增 */
		}

		#winners h3 {
			margin: 0 auto;      /* 新增 */
			display: inline-block;/* 新增 */
			padding: 10px 20px;  /* 新增 */
			border-bottom: 2px solid #3498db; /* 可选装饰线 */
		}
		
		#result {
			font-size: 4em;
			color: #e74c3c;
			margin: 30px;
			min-height: 120px;
			padding: 30px;
			border: 4px solid #3498db;
			border-radius: 15px;
			transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
			transform-origin: center;
			box-shadow: 0 0 15px rgba(52, 152, 219, 0.6);
			width: 600px; /* 固定宽度 */
			min-width: 600px; /* 防止尺寸变化 */
			backface-visibility: hidden; /* 防止渲染闪烁 */
		}

		@keyframes pulse {
			0% { 
				transform: scaleX(1.02) scaleY(1.05);
				box-shadow: 0 0 20px rgba(52, 152, 219, 0.8);
			}
			50% {
				transform: scaleX(1.05) scaleY(1.08);
				box-shadow: 0 0 30px rgba(52, 152, 219, 1);
			}
			100% {
				transform: scaleX(1.02) scaleY(1.05);
				box-shadow: 0 0 20px rgba(52, 152, 219, 0.8);
			}
		}

		#start-btn {
			padding: 20px 50px;  /* 放大按钮尺寸 */
			font-size: 2em;  /* 放大按钮文字 */
			box-shadow: 0 5px 15px rgba(0,0,0,0.3);  /* 添加立体阴影 */
		}

		#start-btn:active {
			transform: scale(0.95);  /* 添加按下效果 */
		}

		#winners-list {
			display: grid;
			grid-template-columns: repeat(8, 1fr); /* 8列网格 */
			gap: 5px;  /* 缩小间隙 */
			padding: 10px;
		}

		#winners-list div {
			background: rgba(46, 204, 113, 0.2);
			padding: 8px 5px;  /* 调整内边距 */
			border-radius: 15px;
			text-align: center;
			font-size: 0.95em;
			white-space: normal;  /* 允许换行 */
			word-break: break-word;  /* 强制断词 */
			min-height: 40px;  /* 确保两行显示 */
			display: flex;
			align-items: center;
			justify-content: center;
		}

		@media (max-width: 1200px) {
			#winners-list {
				grid-template-columns: repeat(4, 1fr);  /* 中等屏幕4列 */
			}
			#winners-list div {
				font-size: 0.9em;
			}
		}
    </style>
</head>
<body>
    <div id="lottery-container">
        <div id="result">点击开始抽奖</div>
        <button id="start-btn" onclick="startLottery()">开始抽奖</button>
    </div>
    <div id="winners">
        <h3>中奖名单</h3>
        <div id="winners-list"></div>
    </div>

    <script>
        // 参与者名单（可自行修改）
        const participants = [
            '张三', '李四', '王五', '赵六', '陈七一', '刘八一', '周九一', '吴十一','陈七二', '刘八二', '周九二', '吴十二','陈七三', '刘八三', '周九三', '吴十三',
            '陈七', '刘八', '周九', '吴十','陈七四', '刘八四', '周九四', '吴十四','陈七五', '刘八五', '周九五', '吴十五','陈七六', '刘八六', '周九六', '吴十六'
        ];
        
        let isDrawing = false;
        let currentWinners = [];
        let remainingParticipants = [...participants];

        function startLottery() {
            if (isDrawing || remainingParticipants.length === 0) return;
            
            isDrawing = true;
            document.getElementById('start-btn').disabled = true;
            
            const resultDiv = document.getElementById('result');
            const startTime = Date.now();
            let iterations = 0;

            const animate = () => {
                if (Date.now() - startTime > 2000 && iterations++ > 15) {
                    endLottery();
                    return;
                }

                const randomIndex = Math.floor(Math.random() * remainingParticipants.length);
                resultDiv.textContent = remainingParticipants[randomIndex];
                resultDiv.style.color = `hsl(${Math.random() * 360}, 70%, 50%)`;
                
                requestAnimationFrame(animate);
            };

            animate();
        }

        function endLottery() {
            isDrawing = false;
            const winner = result.textContent;
            
            currentWinners.push(winner);
            remainingParticipants = remainingParticipants.filter(p => p !== winner);
            
            updateDisplay();
            document.getElementById('start-btn').disabled = remainingParticipants.length === 0;
        }

       function updateDisplay() {
			const resultDiv = document.getElementById('result');
			resultDiv.textContent = currentWinners[currentWinners.length - 1];
			resultDiv.style.color = '#2ecc71';
			resultDiv.style.fontWeight = 'bold';
			
			const winnersList = document.getElementById('winners-list');
			// 清空列表后重新生成带包装的div
			winnersList.innerHTML = currentWinners.map((w, i) => 
				`<div>${i + 1}. ${w}</div>`).join('');
		}
    </script>
</body>
</html>